<template>
  <div>
    <el-button size="mini" type="primary" plain @click="addDialog()">新增仓库</el-button>
    <el-button size="mini" type="primary" plain @click="editDialog()">编辑仓库</el-button>
    <el-button size="mini" type="primary" plain @click="deleteDialog()">删除仓库</el-button>
    <div class="tabbox">
      <el-table
        border
        :data="storelist"
        :stripe="true"
        :header-row-style="{height:'20px'}"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        @row-click="selectRow"
        tooltip-effect="light"
        highlight-current-row
        style="width: 1200px ;"
        height="680px"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="仓库编码"></el-table-column>
        <el-table-column prop="name" label="仓库名称"></el-table-column>
        <el-table-column prop="address" label="仓库地址"></el-table-column>
        <el-table-column prop="orangename" label="仓库核算机构"></el-table-column>
      </el-table>
    </div>
    <div class="clear"></div>
    <Add v-if="dialog.add" :form="tempRow" @dialog-close="dialog.add=false" @refresh="Refresh()"></Add>
    <Edit v-if="dialog.edit" :form="tempRow" @dialog-close="dialog.edit=false" @refresh="Refresh()"></Edit>
    <Delete
      v-if="dialog.delete"
      :form="tempRow"
      @dialog-close="dialog.delete=false"
      @refresh="Refresh()"
    ></Delete>
  </div>
</template>

<script>
import Add from "./store_dialog/add";
import Edit from "./store_dialog/edit";
import Delete from "./store_dialog/delete";
export default {
  components: {
    Add,
    Edit,
    Delete
  },
  methods: {
    RefreshTempRow() {
      this.tempRow = JSON.parse(JSON.stringify(this.SelectRow));
    },
    addDialog() {
      this.RefreshTempRow()
      this.dialog.add = true;
    },
    editDialog() {
      this.RefreshTempRow()
      if (this.CheckSelect()) {
        this.dialog.edit = true;
      }
    },
    deleteDialog() {
      this.RefreshTempRow()
      if (this.CheckSelect()) {
        this.dialog.delete = true;
      }
    },
    Refresh() {
      this.$http.get("/store/list").then(response => {
        this.storelist = response.data;
      });
      this.tempRow = {};
    },
    CheckSelect() {
      if (this.tempRow.id == null || this.tempRow.id == "") {
        this.$message.error("请选择一个仓库");
        return false;
      }
      return true;
    },
    selectRow(Row) {
      window.console.log(Row);
      this.SelectRow = JSON.parse(JSON.stringify(Row));
      this.tempRow = JSON.parse(JSON.stringify(this.SelectRow));
    }
  },
  created() {
    this.Refresh();
  },
  data() {
    return {
      dialog: {
        edit: false,
        add: false,
        delete: false
      },
      storelist: [
        {
          id: "151616156",
          name: "河南四区",
          address: "河南省洛阳市惋惜区苍白路",
          orangeid: "背景总公司，朝阳分公司"
        }
      ],
      SelectRow: {},
      tempRow: {}
    };
  }
};
</script>

<style>
.tabbox {
  margin-top: 10px;
}
</style>